Research
To better understand how to identify the current problems with the interface, I held user-testing discussions with individuals between the ages of 18-64 years old, who have visited a zoo before, and have experience making an online purchase. From these discussions, I learned that users found the current process too tedious and and unnecessarily complex. With this information, I knew that shortening the purchasing process would greatly better the overall experience.
Competitive Analysis
After completing my useability-testing, I wanted to look deeper into the purchasing process with other similar platforms. To do this, I looked at the Downtown Aquarium, the Butterfly Pavilion and Insect Center, and the Cheyenne Mountain Zoo.
From completing this analysis, I was able to create how might we statements to use in the design process:
How might we shorten the ticket purchasing process while still effectively communicating?
How might we ensure the users know when and how they can use their tickets?
How might we lessen anxiety when purchasing a ticket while informing users that we cannot hold onto their tickets?
Design
Problem Statement:
People looking to purchase tickets to visit the Denver Zoo need a less complex and cleaner purchase experience because the current process has too many steps and drives users away.
I started by creating a "happy path" user flow diagram to get a better understanding of how I wanted the basic navigation to look. From this, I created a more in depth user flow that had some more of the steps I wanted. Something I stayed conscious of was keeping the process short but also informative.
Low fidelity wireframes
After creating my proposed user flow, I created pen and paper low fidelity wireframes. In this wireframe, I outlined specific screens that I knew I wanted and how I thought I wanted them to look. In this stage of the process, I was able to see which pages were essential and how much information I wanted on each page.
Mid fidelity wireframes
After creating my low fidelity wireframes, I was able to observe what I liked as well as what I didn't and create a mid fidelity wireframe in Figma. This wireframe allowed me to get a little bit of a more "real-feel" to what the experience would look like. From this wireframe, I was able to understand what basic functions I wanted on each page and how things would work in a layout that was appealing to me.
High fidelity interactive prototype
After completing both my low and mid fidelity prototypes as well as receiving feedback, I created my high fidelity prototype. I used the feedback to make some changes and also added more details. In this stage of my design, I worked with different colors that I liked as well as added more details to each page.
Link to High fidelity interactive prototype: https://www.figma.com/file/EdwgBycli9SPhXQFoUv1UC/Denver-Zoo-High-Fidelity?type=design&node-id=0%3A1&mode=design&t=yhVIZ1jK5TtW6OkT-1
Instructor Feedback
Throughout the design progress, I received a lot of constructive feedback that mostly involved my layouts. It took me some time to understand the spacing of things and I got a lot of help with that. Something that took me some trial and error too was the date and time selection page. With feedback though, I'm happy with how it turned out.
Evaluation and results
After completing the first iteration of my high fidelity prototype, I had a user who had experience on the Denver zoo website as well as a user without experience on the website look at my prototype. From this testing, I learned that my calendar still needed some updating. There seemed to be some confusion about which days were available as well as what the time selector actually meant and it's purpose. Something else that a user added was the concern about there being a place to add coupons.
With these identified pain points in my testing, I made changes to the calendar, the checkout page, footer, and confirmation page. On the select date and time page, I blocked out unavailable dates as well as added a blurb about what the time selection meant. I also added some more visual queues to the time selection about which time the user had selected. On the checkout page, I condensed some information as well as added an input field for a coupon. I adjusted the footer to make sure it passed WGAC AA compliance. On the confirmation page, I condensed the page a little, added some more text, and made sure the spacing looked good.
Reflection
With more time, I think I would add a little bit more to the top nav bar. I think I could add a little bit more subtle color throughout that would bring the experience more too life. It was important to me to keep the design feeling clean but I think I could experiment more with different kinds of layouts. Right now it seems a little static and if I were to continue working on this, I would want to add some more variety.
I had a lot of fun working on this project and learned a lot of cool things along the way that I had never thought about before. Learning about the grid and vertical spacing were really helpful and I think helped my design get the polished look that I like. I also learned that less is more, especially in an experience that involves users spending money.
